<template>

  <el-dialog
    title="选择角色"
    :visible.sync="dialogVisible"
    width="50%"
    :destroy-on-close="true"
    :close-on-click-modal="false"
    :append-to-body="true"
  >
    <el-container>
      <el-input
        v-model="rolsContent"
        placeholder="搜索角色"
        class="input-with-select"
        style="margin: 5px auto"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="departmentfliter"
        />
      </el-input>

      <el-main style="padding: 10px 0">
        <el-row>
          <el-col :span="24" class="departList">
            <el-container>
              <el-main>
                <div class="my-list table-tree">
                  <el-tree
                    ref="roletreeref"
                    :data="rolsTree"
                    :props="deaprops"
                    show-checkbox
                    :check-strictly="true"
                    node-key="Id"
                    :default-expand-all="true"
                    :expand-on-click-node="false"
                    :check-on-click-node="true"
                    :filter-node-method="filterRoleNode"
                    :disable-branch-nodes="true"
                    @check-change="ckeckRoleChoose"
                  />
                </div>
              </el-main>
            </el-container>
          </el-col>
        </el-row>
      </el-main>
      <el-main class="select-person">
        <el-row type="flex" style="flex-wrap: wrap">
          <el-tag
            v-for="tag in tags"
            :key="tag.Id"
            :type="tag.type"
            style="margin: 10px"
            closable
            @close="handleClose(tag)"
          >
            {{ tag.Name }}
          </el-tag>
        </el-row>
      </el-main>
      <el-footer>

        <div>
          <el-button size="medium" @click="onCancel">返回</el-button>
          <el-button
            type="primary"
            size="medium"
            @click="onSubmit"
          >提交</el-button>
        </div>
      </el-footer>
    </el-container>
  </el-dialog>

</template>
<script>
import { deepClone } from '@/utils/index'
export default {
  props: {
    echoList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      deaprops: {
        value: 'Id', // ID字段名
        label: 'Name', // 显示名称
        children: 'children' // 子级字段名
      },
      dialogVisible: false, // 弹窗
      rolsContent: '',
      rolsTree: [], // 角色树形
      tags: [] // 标签
    }
  },
  watch: {
    rolsContent(val) {
      this.$refs.treeref.filter(val)
    }
  },
  mounted() {},
  methods: {
    getRoleTree() {
      var _this = this
      // GetRoleGroupTree().then(res => {
      //   _this.rolsTree = res.Data
      // })
    },
    // 取消
    onCancel() {
      this.tags = []
      this.dialogVisible = false
    },
    // 提交
    onSubmit() {
      this.dialogVisible = false
      // 回调方法tags为选中的数组值
      this.$emit('allSelect', this.tags)
    },
    // 点击的checkbox
    ckeckchoose(data, ischose, leaf) {
      if (ischose) {
        this.tags.push(data)
      } else {
        this.tags.splice(this.tags.indexOf(data), 1)
      }
    },
    // 移除tag
    handleClose(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1)
      this.$refs.treeref.setCheckedNodes(this.tags)
    },
    // 弹窗
    showRoleDialog() {
      this.tags = deepClone(this.echoList)
      this.dialogVisible = true
      this.getRoleTree()
      // 等待dom全部加载再渲染
      this.$nextTick(() => {
        var rolearr = []
        for (var i = 0; i < this.tags.length; i++) {
          if (this.tags[i].Type === 3) {
            rolearr.push(this.tags[i].Id)
            this.$refs.roletreeref.setCheckedKeys(rolearr)
          }
        }
      })
    },
    // 点击tree某个节点
    handleNodeClick(data) {

    },
    filterNode(value, data) {
      if (!value) return true
      return data.Label.indexOf(value) !== -1
    },
    departmentfliter() {},
    // 点击的checkbox
    ckeckRoleChoose(data, ischose, leaf) {
      if (ischose) {
        var check = true
        this.tags.forEach(tag => {
          if (tag.Id === data.Id) {
            check = false
          }
        })
        if (check) {
          this.tags.push({ Id: data.Id, Name: data.Name, Type: data.Type })
        }
      } else {
        for (var i = 0; i < this.tags.length; i++) {
          if (this.tags[i].Id === data.Id) {
            this.tags.splice(i, 1)
          }
        }
      }
    },
    filterRoleNode(value, data) {
      if (!value) return true
      return data.Name.indexOf(value) !== -1
    }
  }
}
</script>
